<template>
  <div style="padding: 20px;min-width: 322px">
    <el-row>
      <el-input
        style="color: rgba(12,255,0,1)"
        ref="text"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="input">
      </el-input>
    </el-row>
    <el-row>
      <el-slider v-model="font_width" :min="12"
                 :max="18" show-input @input="changeSize"></el-slider>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-color-picker v-model="color" size="small" @change="changeColor"></el-color-picker>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="12">
            <el-checkbox label="粗体" @change="changeBold" v-model="bold"></el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-checkbox label="斜体" @change="changeItalic" v-model="italic"></el-checkbox>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-button size="mini" @click="complete">确定</el-button>

  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        input: '',
        font_width: 12,
        font_family: '',
        color: '',
        bold: false,
        italic: false
      }
    },
    methods: {
      changeSize() {
        this.$refs['text'].$refs['textarea'].style.fontSize = this.font_width + "px";
      },
      changeColor() {
        this.$refs['text'].$refs['textarea'].style.color = this.color;
      },
      changeItalic() {
        this.$refs['text'].$refs['textarea'].style.fontStyle = this.italic ? 'italic' : 'normal';
      },
      changeBold() {
        this.$refs['text'].$refs['textarea'].style.fontWeight = this.bold ? 'bold' : 'normal';
      },
      complete() {
        this.convertText();
        this.$emit('onConfirm', this.text, {
          fontSize: this.font_width + 'px',
          color: this.color,
          fontStyle: this.italic ? 'italic' : 'normal',
          fontWeight: this.bold ? 'bold' : 'normal'
        });

        this.input = '';
        this.font_width = 12;
        this.color = '';
        this.bold = undefined;
        this.italic = undefined;
        this.$refs['text'].$refs['textarea'].style.fontSize = this.font_width + "px";
        this.$refs['text'].$refs['textarea'].style.color = this.color;
        this.$refs['text'].$refs['textarea'].style.fontStyle = this.italic ? 'italic' : 'normal';
        this.$refs['text'].$refs['textarea'].style.fontWeight = this.bold ? 'bold' : 'normal';

      },
      convertText() {
        this.text = this.input.replace(/\n/g, '<br>');
      }
    }
  }
</script>

<style scoped>

  .a {
    font-style: italic;
  }
</style>
